<template>
  <div class="pay_zhu">
    <div class="pay_tou">
      <router-link :to="{ path: '/index' }">
        <img
          style="width: 160px; height: 60px; margin-top:0px "
          src="../../assets/mao.png"
          alt=""
        />
      </router-link>
      <span>充值</span>
      <el-breadcrumb class="buzou" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/userhome' }">个人中心</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/userhome/user_neirong' }">钱包</el-breadcrumb-item>
        <el-breadcrumb-item >充值</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="pay_user">
      <div class="about">
        <div class="about__img service">
          <img
            class="service__img"
            alt=""
            style="width:80px;border-radius:10px ;height:80px "
            id="sidebar_logo"
            :src="this.userInfo.avatar"
          />
          <p style="font-size:25px">{{ this.userInfo.username }}</p>
          <p class="service__name" style="font-size:25px" id="sidebar_name">
            ￥{{ this.userInfo.accountBalance }}
          </p>
          <a class="service__home" id="sidebar_homeUrl" target="_blank"
            >当前余额</a
          >
        </div>
        <div class="about__text" style="min-height: 50px;">
          <p id="sidebar_desc">活动</p>
          <div class="about__text-list">
            <ul>
              <li>为庆祝华哲网上书店首次开通</li>
              <li>
                现充值50元送50元
              </li>
              <li>
                充值100元送80元
              </li>
              <li>
                充值200元送100元
              </li>
              <li>
                充值500元送300元
              </li>

              <li>
                充值1000元送500元
              </li>
              <li>
                .............
              </li>
              <li>
                更多优惠敬请期待
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="pay_xz">
      <div class="xz">
        <el-card
          shadow="hover"
          class="box-card pay_card"
          v-for="(item, index) in this.price_1"
          :key="item.price"
          @click.native="checked(index, item)"
        >
          <i class="triangle" v-show="index == index_1"> </i>
          <i class="el-icon-check gou"></i>
          <div class="text item">
            <div class="price">
              <i
                class="layui-icon layui-icon-rmb"
                style="margin-left: 10px; font-size: 20px; color: rgb(255,180,0);"
              ></i>
              <span>{{ item.num }}</span>
            </div>
            <span>{{ item.price }}元</span>
          </div>
        </el-card>
        <el-card
          @click.native="index_1 = -1"
          class="box-card pay_card"
          shadow="hover"
        >
          <div class="text item">
            <div class="price">
              <span
                @click="
                  zdy = 1;
                  order_price = 0;
                "
                v-if="zdy == 0"
                >自定义</span
              >
              <el-input
                autofocus="true"
                v-if="zdy == 1"
                v-model="user_price"
                placeholder="充值金额"
              ></el-input>
            </div>
            <span>{{ this.user_price }}元</span>
          </div>
        </el-card>
      </div>
    </div>
    <el-card class="box-card pay_zf" @>
      <div class="text item">
        <p>选择支付方式</p>
        <div @click="pay" class="zfb">
          <img style="width:45px" src="../../assets/支付宝(1).png" alt="" />
          <span>支付宝</span>
        </div>
        <el-divider
          content-position="center"
          class="fen"
          direction="vertical"
        ></el-divider>
        <div class="zfb" @click="wx">
          <img
            style="width:40px"
            src="../../assets/支付-_微信支付.png"
            alt=""
          />
          <span>微信</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      userInfo: {},
      user_price: "",
      order_price: "",
      index_1: -1, //选择状态
      zdy: 0, //自定义状态
      price_1: [
        { num: 100, price: 50 },
        { num: 180, price: 100 },
        { num: 300, price: 200 },
        { num: 800, price: 500 },
        { num: 1500, price: 1000 },
      ],
    };
  },
  methods: {
    checked(index, item) {
      this.index_1 = index;
      this.user_price = "";
      this.order_price = item.price;
      this.zdy = 0;
      ;
      // $event.currentTarget.className =
    },
    wx() {
      //微信支付
      this.$message("暂未开通，敬请期待");
    },
    pay() {
      //支付宝支付
      if (this.order_price == "" && this.user_price == "") {
        this.$message({
          message: "您还未选择充值金额",
          type: "warning",
        });
      } else {
        let order = ""; //充值生成的订单ID
        if (this.order_price == 0) {
          this.$confirm(
            "您选择了自定义充值, 充值的金额为" +
              this.user_price +
              "元，您是否确定充值?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              var params = new URLSearchParams();
              params.append("userId", this.userInfo.userId);
              params.append("amount", this.user_price);
              axios
                .post(
                  "/fl-user/createBalanceRecharge",
                  params
                )
                .then((res) => {
                  ;
                  order = res.data.data;
                  window.open(
                    "https://end.flya.top/aliPay/pcPay?orderId=" +
                      order +
                      "&type=2",
                    "_parent"
                  );
                });
              this.$message({
                type: "success",
                message: "成功创建订单!",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消充值",
              });
            });
        } else {
          this.$confirm(
            "您选择了优惠充值, 充值的金额为" +
              this.order_price +
              "元，您是否确定充值?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              this.$message({
                message: "下单成功,正在为您跳转支付页面",
                type: "success",
              });
              var params = new URLSearchParams();
              params.append("userId", this.userInfo.userId);
              params.append("amount", this.order_price);
              axios
                .post(
                  "/fl-user/createBalanceRecharge",
                  params
                )
                .then((res) => {
                  ;
                  order = res.data.data;
                  window.open(
                    "/aliPay/pcPay?orderId=" +
                      order +
                      "&type=2",
                    "_parent"
                  );
                });
              this.$message({
                type: "success",
                message: "成功创建订单!",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消充值",
              });
            });
        }
      }
    },
  },

  created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
  },
};
</script>

<style lang="less">
.pay_zhu {
  width: 60%;
  margin-left: 18%;

  .pay_tou {
    height: 60px;
    position: relative;
    span {
      line-height: -30px;
      font-size: 20px;
      font-weight: 700;
      color: #5f59597c;
    }
    .buzou {
      position: absolute;
      left: 24%;
      float: right;
      top:45px;
      span {
        font-size: 15px;
      }
    }
  }

  .pay_user {
    width: 20%;

    float: left;
    margin-right: -1px;
    width: 210px;
    border-right: 1px solid #e5e5e5;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgb(229, 229, 229);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    .about {
      margin: 0 25px;
      padding: 30px 0 20px;
      color: #7f7f7f;
      font-size: 12px;
      text-align: center;
      .service__name {
        margin-top: 6px;
        margin-left: -10px;
        margin-right: -10px;
        font-size: 18px;
        color: #313131;
      }
      .about__text {
        margin-top: 25px;
        p {
          line-height: 1.8;
          box-sizing: border-box;

          padding: 0;
          margin: 0;
        }
        .about__text-list {
          li {
            text-align: left;
            line-height: 1.8;
            padding-left: 12px;
            background: url(//midas.gtimg.cn/midas/minipay_v2/images/li_square.afe4283….png)
              2px 7px no-repeat;
            *background-position: 2px 9px;
          }
        }
      }
    }
  }
  .pay_xz {
    padding: 10px;
    width: 100%;
    left: 30px;

    .xz {
      width: 100%;
      position: relative;
      .triangle {
        //三角形角标
        width: 0px;
        height: 0px;
        margin-left: 67px;
        margin-top: -21px;
        position: absolute;
        border-top: 43px solid #3387ef;
        border-left: 43px solid transparent;
      }
      .gou {
        //对勾
        margin-left: 88px;
        margin-top: -18px;
        font-size: 20px;
        color: white;
        position: absolute;
      }
      .pay_card {
        cursor: pointer;
        margin: 10px;

        margin-left: 20px;
        width: 130px;
        height: 150px;
        float: left;
        .item {
          .icon-corner-checked {
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            background-image: url(//midas.gtimg.cn/midas/minipay_v2/images/sprite.5e2f61e….png);
            background-position: -113 px -129 px;
            width: 25px;
            height: 25px;
          }
          .price {
            width: 90px;
            height: 90px;
            border-bottom: 1px dashed #e3e3e3;
            font-size: 20px;
            text-align: center;
            line-height: 90px;
          }
          text-align: center;
          line-height: 40px;
          font-size: 15px;
        }
      }
    }
  }
  .pay_zf {
    width: 80%;
    margin-left: 20%;
    .item {
      .fen {
        height: 2em;
        margin-top: 25px;
      }
      p {
        font-size: 15px;
      }
      .zfb {
        margin-top: 25px;
        cursor: pointer;
        display: inline-block;
        font-size: 16px;
        font-family: Microsoft Yahei;
        padding: 0 40 px;
        box-sizing: border-box;
        vertical-align: middle;
        margin-left: 10px;
        img {
          display: inline-block;
          position: relative;
          top: 10px;
        }
        span {
          font-size: 16px;
          color: #666;
          font-family: Microsoft Yahei;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
